﻿<!DOCTYPE html>
<!--

	Theme Name: Solana
	Description: HTML/CSS Template
	Author: Abcgomel 
	Version: 1.0
	Designed & Coded by Abcgomel
	
-->
<html>
 	<head>
		<title>Solana - Responsive Multipurpose HTML Template</title>
		<meta charset=utf-8 >
		
		<meta name="robots" content="index, follow" > 
		<meta name="keywords" content="" > 
		<meta name="description" content="" > 
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="favicon.ico">

<!-- CSS begin -->

		
		<link rel="stylesheet" type="text/css" href="css/style.css" >
		<link rel="stylesheet" type="text/css" href="css/skeleton.css" >

		<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-1.3.4.css"  >
	    <link rel="stylesheet" href="css/switcher/style.css">
		<link rel="stylesheet" href="css/layout/wide.css" id="layout">
		<link rel="stylesheet" href="css/colors/yellow.css" id="colors">

		<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="css/ie-warning.css" ><![endif]-->
		<!--[if lte IE 9]><link rel="stylesheet" type="text/css" media="screen" href="css/style-ie.css" /><![endif]-->
		<!--[if lte IE 8]><link rel="stylesheet" type="text/css" href="css/ei8fix.css" ><![endif]-->
		
		
 
<!-- CSS end -->

		<!--[if lt IE 9]>
			<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
		
	</head>
	<body>
	
<div id="wrap" class="boxed">
<div class="grey-bg"> <!-- Grey bg  -->	
	
	
	<!--[if lte IE 7]>
	<div id="ie-container">
		<div id="ie-cont-close">
			<a href='#' onclick='javascript&#058;this.parentNode.parentNode.style.display="none"; return false;'><img src='images/ie-warning-close.jpg' style='border: none;' alt='Close'></a>
		</div>
		<div id="ie-cont-content" >
			<div id="ie-cont-warning">
				<img src='images/ie-warning.jpg' alt='Warning!'>
			</div>
			<div id="ie-cont-text" >
				<div id="ie-text-bold">
					You are using an outdated browser
				</div>
				<div id="ie-text">
					For a better experience using this site, please upgrade to a modern web browser.
				</div>
			</div>
			<div id="ie-cont-brows" >
				<a href='http://www.firefox.com' target='_blank'><img src='images/ie-warning-firefox.jpg' alt='Download Firefox'></a>
				<a href='http://www.opera.com/download/' target='_blank'><img src='images/ie-warning-opera.jpg' alt='Download Opera'></a>
				<a href='http://www.apple.com/safari/download/' target='_blank'><img src='images/ie-warning-safari.jpg' alt='Download Safari'></a>
				<a href='http://www.google.com/chrome' target='_blank'><img src='images/ie-warning-chrome.jpg' alt='Download Google Chrome'></a>
			</div>
		</div>
	</div>
	<![endif]-->
	
<!-- HEADER -->
		<header id="header" >
			<div class="container clearfix">
				<div class="sixteen columns">
						<div class="header-container m-top-30 clearfix">
				
							<div class="header-logo-container ">
								<div class="logo-container">	
									<a href="index.html" class="logo" rel="home" title="Home">
										<img src="images/logo-retina.png" alt="solana" >
									</a>
								</div>
							</div>

							<div class="header-menu-container right">
								<!-- TOP MENU -->
								<nav id="main-nav">
									<ul class="sf-menu clearfix">
										<li ><a href="index.html">Home</a>
											<ul>
												<li><a href="index2.html">Home 2</a></li>
												<li><a href="index3.html">Home 3</a></li>
												<li><a href="index4.html">Home 4</a></li>
												<li><a href="index5.html">Home 5</a></li>
											</ul>
										</li>
										<li class="current"><a href="elements.html">Features</a>
											<ul>
												<li><a href="about-us.html">About Us</a></li>
												<li><a href="services.html">Services</a></li>
												<li><a href="elements.html">Elements</a></li>
												<li class="current"><a href="icons.html">Icons</a></li>
												<li><a href="pricing-tables.html">Pricing tables</a></li>
												<li><a href="404.html">404 Error</a></li>

											</ul>
										</li>
										<li><a href="portfolio.html">Portfolio</a>
											<ul>
												<li><a href="portfolio.html">2 column</a></li>
												<li><a href="portfolio3.html">3 column</a></li>
												<li><a href="portfolio4.html">4 column</a></li>
												<li><a href="portfolio-single.html">Portfolio single</a></li>
												<li><a href="#">3D level menu</a>
													<ul>
														<li><a href="#">Menu item</a></li>
														<li><a href="#">Menu item</a></li>
													</ul>
												</li>
											</ul>
										</li>
										<li><a href="blog.html">Blog</a>
											<ul>
												<li><a href="blog-single.html">Blog-single</a></li>
											</ul>
										</li>
										<li ><a href="contact.html">Contact</a></li>
										
								  </ul>
								</nav>
								
								<div class="search-container ">
									<form action="#" class="search-form">
										<input type="text" name="search-form-txt" class="search-text" >
										<input type="submit" value="" class="search-submit" name="submit">
									</form>
								</div>
								
							</div>
							
						</div>
				</div>
			</div>

		</header>

<!-- PAGE TITLE -->
	<div class="container m-bot-35 clearfix">
		<div class="sixteen columns">
			<div class="page-title-container clearfix">
				<h1 class="page-title">ICONS</h1>
			</div>	
		</div>
	</div>	
	
</div>	<!-- Grey bg end -->	

<!-- CONTENT -->
	<div class="container m-bot-25 clearfix">
	
	

			
			
								
<!-- Web Application Icons -->
				<div class="row">
				
					<div class="sixteen columns">
						<p class="styled-box iconed-box info">In addition to usual image icons Felius theme integrate <a class="a-invert" href="http://fortawesome.github.com/Font-Awesome/">Font Awesome</a> with over 360 icons. In a single collection, Font Awesome is a pictographic language of web-related actions. Easily style icon color, size, shadow, and anything that's possible with CSS. You can read more about it <a class="a-invert" href="http://fortawesome.github.com/Font-Awesome/">here</a>.</p>
					
					</div>	
					
				
					<div class="sixteen columns">
						<h3 class="title-block">New Icons in 3.2.0</h3>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-compass"></i> icon-compass</li>
						  <li><i class="icon-spinner icon-spin icon-large"></i> icon-spin </li>
						  <li><i class="icon-collapse"></i> icon-collapse</li>
						  <li><i class="icon-collapse-top"></i> icon-collapse-top</li>
						  <li><i class="icon-gbp"></i> icon-gbp</li>
						  <li><i class="icon-rupee"></i> icon-rupee</li>
						  <li><i class="icon-renminbi"></i> icon-renminbi</li>
						  <li><i class="icon-bitcoin"></i> icon-bitcoin</li>
						  <li><i class="icon-sort-by-alphabet-alt"></i> icon-sort-by-alphabet-alt</li>
						  <li><i class="icon-sort-by-order-alt"></i> icon-sort-by-order-alt</li>
						  <li><i class="icon-xing-sign"></i> icon-xing-sign</li>
						  <li><i class="icon-youtube-play"></i> icon-youtube-play</li>
						  <li><i class="icon-dropbox"></i> icon-dropbox</li>
						  <li><i class="icon-stackexchange"></i> icon-stackexchange</li>
						  <li><i class="icon-instagram"></i> icon-instagram</li>
						  <li><i class="icon-flickr"></i> icon-flickr</li>
						  <li><i class="icon-adn"></i> icon-adn</li>
						  <li><i class="icon-bitbucket"></i> icon-bitbucket</li>
						 
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-h-sign"></i> icon-h-sign</li>
						  <li><i class="icon-hospital"></i> icon-hospital</li>
						  <li><i class="icon-expand"></i> icon-expand</li>
						  <li><i class="icon-usd"></i> icon-usd</li>
						  <li><i class="icon-jpy"></i> icon-jpy</li>
						  <li><i class="icon-krw"></i> icon-krw</li>
						  <li><i class="icon-file"></i> icon-file</li>
						  <li><i class="icon-sort-by-attributes"></i> icon-sort-by-attributes</li>
						  <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
						  <li><i class="icon-xing"></i> icon-xing</li>
						  <li><i class="icon-gittip"></i> icon-gittip</li>
						  <li><i class="icon-sun"></i> icon-sun</li>
						  <li><i class="icon-moon"></i> icon-moon</li>
						  <li><i class="icon-archive"></i> icon-archive</li>
						  <li><i class="icon-bug"></i> icon-bug</li>
						  <li><i class="icon-long-arrow-down"></i> icon-long-arrow-down</li>
						  <li><i class="icon-long-arrow-up"></i> icon-long-arrow-up</li>
						  <li><i class="icon-tumblr"></i> icon-tumblr</li>
						  
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-medkit"></i> icon-medkit</li>
						  <li><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</li>
						  <li><i class="icon-eur"></i> icon-eur</li>
						  <li><i class="icon-dollar"></i> icon-dollar</li>
						  <li><i class="icon-yen"></i> icon-yen</li>
						  <li><i class="icon-won"></i> icon-won</li>
						  <li><i class="icon-file-text"></i> icon-file-text</li>
						  <li><i class="icon-sort-by-attributes-alt"></i> icon-sort-by-attributes-alt</li>
						  <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
						  <li><i class="icon-youtube"></i> icon-youtube</li>
						  <li><i class="icon-vk"></i> icon-vk</li>
						  <li><i class="icon-weibo"></i> icon-weibo</li>
						  <li><i class="icon-renren"></i> icon-renren</li>
						  <li><i class="icon-long-arrow-left"></i> icon-long-arrow-left</li>
						  <li><i class="icon-long-arrow-right"></i> icon-long-arrow-right</li>
						  <li><i class="icon-apple"></i> icon-apple</li>
						  <li><i class="icon-windows"></i> icon-windows</li>
						  <li><i class="icon-tumblr-sign"></i> icon-tumblr-sign</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-stethoscope"></i> icon-stethoscope</li>
						  <li><i class="icon-user-md"></i> icon-user-md</li>
						  <li><i class="icon-euro"></i> icon-euro</li>
						  <li><i class="icon-inr"></i> icon-inr</li>
						  <li><i class="icon-cny"></i> icon-cny</li>
						  <li><i class="icon-btc"></i> icon-btc</li>
						  <li><i class="icon-sort-by-alphabet"></i> icon-sort-by-alphabet</li>
						  <li><i class="icon-sort-by-order"></i> icon-sort-by-order</li>
						  <li><i class="icon-youtube-sign"></i> icon-youtube-sign</li>
						  <li><i class="icon-foursquare"></i> icon-foursquare</li>
						  <li><i class="icon-trello"></i> icon-trello</li>
						  <li><i class="icon-female"></i> icon-female</li>
						  <li><i class="icon-male"></i> icon-male</li>
						  <li><i class="icon-android"></i> icon-android</li>
						  <li><i class="icon-linux"></i> icon-linux</li>
						  <li><i class="icon-dribble"></i> icon-dribble</li>
						  <li><i class="icon-skype"></i> icon-skype</li>
						  <li><i class="icon-bitbucket-sign"></i> icon-bitbucket-sign</li>
						</ul>
					</div>
				</div>	
					
					
				<div class="row">	
					<div class="sixteen columns">
						<h3 class="title-block">Web Application Icons</h3>
					</div>	
					<div class="four columns">
					
						<ul class="the-icons">
						  <li><i class="icon-adjust"></i> icon-adjust</li>
						  <li><i class="icon-asterisk"></i> icon-asterisk</li>
						  <li><i class="icon-ban-circle"></i> icon-ban-circle</li>
						  <li><i class="icon-bar-chart"></i> icon-bar-chart</li>
						  <li><i class="icon-barcode"></i> icon-barcode</li>
						  <li><i class="icon-beaker"></i> icon-beaker</li>
						  <li><i class="icon-beer"></i> icon-beer</li>
						  <li><i class="icon-bell"></i> icon-bell</li>
						  <li><i class="icon-bell-alt"></i> icon-bell-alt</li>
						  <li><i class="icon-bolt"></i> icon-bolt</li>
						  <li><i class="icon-book"></i> icon-book</li>
						  <li><i class="icon-bookmark"></i> icon-bookmark</li>
						  <li><i class="icon-bookmark-empty"></i> icon-bookmark-empty</li>
						  <li><i class="icon-briefcase"></i> icon-briefcase</li>
						  <li><i class="icon-bullhorn"></i> icon-bullhorn</li>
						  <li><i class="icon-calendar"></i> icon-calendar</li>
						  <li><i class="icon-camera"></i> icon-camera</li>
						  <li><i class="icon-camera-retro"></i> icon-camera-retro</li>
						  <li><i class="icon-certificate"></i> icon-certificate</li>
						  <li><i class="icon-check"></i> icon-check</li>
						  <li><i class="icon-check-empty"></i> icon-check-empty</li>
						  <li><i class="icon-circle"></i> icon-circle</li>
						  <li><i class="icon-circle-blank"></i> icon-circle-blank</li>
						  <li><i class="icon-cloud"></i> icon-cloud</li>
						  <li><i class="icon-cloud-download"></i> icon-cloud-download</li>
						  <li><i class="icon-cloud-upload"></i> icon-cloud-upload</li>
						  <li><i class="icon-coffee"></i> icon-coffee</li>
						  <li><i class="icon-cog"></i> icon-cog</li>
						  <li><i class="icon-cogs"></i> icon-cogs</li>
						  <li><i class="icon-comment"></i> icon-comment</li>
						  <li><i class="icon-comment-alt"></i> icon-comment-alt</li>
						  <li><i class="icon-comments"></i> icon-comments</li>
						  <li><i class="icon-comments-alt"></i> icon-comments-alt</li>
						  <li><i class="icon-credit-card"></i> icon-credit-card</li>
						  <li><i class="icon-dashboard"></i> icon-dashboard</li>
						  <li><i class="icon-desktop"></i> icon-desktop</li>
						  <li><i class="icon-download"></i> icon-download</li>
						  <li><i class="icon-download-alt"></i> icon-download-alt</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-edit"></i> icon-edit</li>
						  <li><i class="icon-envelope"></i> icon-envelope</li>
						  <li><i class="icon-envelope-alt"></i> icon-envelope-alt</li>
						  <li><i class="icon-exchange"></i> icon-exchange</li>
						  <li><i class="icon-exclamation-sign"></i> icon-exclamation-sign</li>
						  <li><i class="icon-external-link"></i> icon-external-link</li>
						  <li><i class="icon-eye-close"></i> icon-eye-close</li>
						  <li><i class="icon-eye-open"></i> icon-eye-open</li>
						  <li><i class="icon-facetime-video"></i> icon-facetime-video</li>
						  <li><i class="icon-fighter-jet"></i> icon-fighter-jet</li>
						  <li><i class="icon-film"></i> icon-film</li>
						  <li><i class="icon-filter"></i> icon-filter</li>
						  <li><i class="icon-fire"></i> icon-fire</li>
						  <li><i class="icon-flag"></i> icon-flag</li>
						  <li><i class="icon-folder-close"></i> icon-folder-close</li>
						  <li><i class="icon-folder-open"></i> icon-folder-open</li>
						  <li><i class="icon-folder-close-alt"></i> icon-folder-close-alt</li>
						  <li><i class="icon-folder-open-alt"></i> icon-folder-open-alt</li>
						  <li><i class="icon-food"></i> icon-food</li>
						  <li><i class="icon-gift"></i> icon-gift</li>
						  <li><i class="icon-glass"></i> icon-glass</li>
						  <li><i class="icon-globe"></i> icon-globe</li>
						  <li><i class="icon-group"></i> icon-group</li>
						  <li><i class="icon-hdd"></i> icon-hdd</li>
						  <li><i class="icon-headphones"></i> icon-headphones</li>
						  <li><i class="icon-heart"></i> icon-heart</li>
						  <li><i class="icon-heart-empty"></i> icon-heart-empty</li>
						  <li><i class="icon-home"></i> icon-home</li>
						  <li><i class="icon-inbox"></i> icon-inbox</li>
						  <li><i class="icon-info-sign"></i> icon-info-sign</li>
						  <li><i class="icon-key"></i> icon-key</li>
						  <li><i class="icon-leaf"></i> icon-leaf</li>
						  <li><i class="icon-laptop"></i> icon-laptop</li>
						  <li><i class="icon-legal"></i> icon-legal</li>
						  <li><i class="icon-lemon"></i> icon-lemon</li>
						  <li><i class="icon-lightbulb"></i> icon-lightbulb</li>
						  <li><i class="icon-lock"></i> icon-lock</li>
						  <li><i class="icon-unlock"></i> icon-unlock</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-magic"></i> icon-magic</li>
						  <li><i class="icon-magnet"></i> icon-magnet</li>
						  <li><i class="icon-map-marker"></i> icon-map-marker</li>
						  <li><i class="icon-minus"></i> icon-minus</li>
						  <li><i class="icon-minus-sign"></i> icon-minus-sign</li>
						  <li><i class="icon-mobile-phone"></i> icon-mobile-phone</li>
						  <li><i class="icon-money"></i> icon-money</li>
						  <li><i class="icon-move"></i> icon-move</li>
						  <li><i class="icon-music"></i> icon-music</li>
						  <li><i class="icon-off"></i> icon-off</li>
						  <li><i class="icon-ok"></i> icon-ok</li>
						  <li><i class="icon-ok-circle"></i> icon-ok-circle</li>
						  <li><i class="icon-ok-sign"></i> icon-ok-sign</li>
						  <li><i class="icon-pencil"></i> icon-pencil</li>
						  <li><i class="icon-picture"></i> icon-picture</li>
						  <li><i class="icon-plane"></i> icon-plane</li>
						  <li><i class="icon-plus"></i> icon-plus</li>
						  <li><i class="icon-plus-sign"></i> icon-plus-sign</li>
						  <li><i class="icon-print"></i> icon-print</li>
						  <li><i class="icon-pushpin"></i> icon-pushpin</li>
						  <li><i class="icon-qrcode"></i> icon-qrcode</li>
						  <li><i class="icon-question-sign"></i> icon-question-sign</li>
						  <li><i class="icon-quote-left"></i> icon-quote-left</li>
						  <li><i class="icon-quote-right"></i> icon-quote-right</li>
						  <li><i class="icon-random"></i> icon-random</li>
						  <li><i class="icon-refresh"></i> icon-refresh</li>
						  <li><i class="icon-remove"></i> icon-remove</li>
						  <li><i class="icon-remove-circle"></i> icon-remove-circle</li>
						  <li><i class="icon-remove-sign"></i> icon-remove-sign</li>
						  <li><i class="icon-reorder"></i> icon-reorder</li>
						  <li><i class="icon-reply"></i> icon-reply</li>
						  <li><i class="icon-resize-horizontal"></i> icon-resize-horizontal</li>
						  <li><i class="icon-resize-vertical"></i> icon-resize-vertical</li>
						  <li><i class="icon-retweet"></i> icon-retweet</li>
						  <li><i class="icon-road"></i> icon-road</li>
						  <li><i class="icon-rss"></i> icon-rss</li>
						  <li><i class="icon-screenshot"></i> icon-screenshot</li>
						  <li><i class="icon-search"></i> icon-search</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-share"></i> icon-share</li>
						  <li><i class="icon-share-alt"></i> icon-share-alt</li>
						  <li><i class="icon-shopping-cart"></i> icon-shopping-cart</li>
						  <li><i class="icon-signal"></i> icon-signal</li>
						  <li><i class="icon-signin"></i> icon-signin</li>
						  <li><i class="icon-signout"></i> icon-signout</li>
						  <li><i class="icon-sitemap"></i> icon-sitemap</li>
						  <li><i class="icon-sort"></i> icon-sort</li>
						  <li><i class="icon-sort-down"></i> icon-sort-down</li>
						  <li><i class="icon-sort-up"></i> icon-sort-up</li>
						  <li><i class="icon-spinner"></i> icon-spinner</li>
						  <li><i class="icon-star"></i> icon-star</li>
						  <li><i class="icon-star-empty"></i> icon-star-empty</li>
						  <li><i class="icon-star-half"></i> icon-star-half</li>
						  <li><i class="icon-tablet"></i> icon-tablet</li>
						  <li><i class="icon-tag"></i> icon-tag</li>
						  <li><i class="icon-tags"></i> icon-tags</li>
						  <li><i class="icon-tasks"></i> icon-tasks</li>
						  <li><i class="icon-thumbs-down"></i> icon-thumbs-down</li>
						  <li><i class="icon-thumbs-up"></i> icon-thumbs-up</li>
						  <li><i class="icon-time"></i> icon-time</li>
						  <li><i class="icon-tint"></i> icon-tint</li>
						  <li><i class="icon-trash"></i> icon-trash</li>
						  <li><i class="icon-trophy"></i> icon-trophy</li>
						  <li><i class="icon-truck"></i> icon-truck</li>
						  <li><i class="icon-umbrella"></i> icon-umbrella</li>
						  <li><i class="icon-upload"></i> icon-upload</li>
						  <li><i class="icon-upload-alt"></i> icon-upload-alt</li>
						  <li><i class="icon-user"></i> icon-user</li>
						  <li><i class="icon-user-md"></i> icon-user-md</li>
						  <li><i class="icon-volume-off"></i> icon-volume-off</li>
						  <li><i class="icon-volume-down"></i> icon-volume-down</li>
						  <li><i class="icon-volume-up"></i> icon-volume-up</li>
						  <li><i class="icon-warning-sign"></i> icon-warning-sign</li>
						  <li><i class="icon-wrench"></i> icon-wrench</li>
						  <li><i class="icon-zoom-in"></i> icon-zoom-in</li>
						  <li><i class="icon-zoom-out"></i> icon-zoom-out</li>
						</ul>
					</div>	
				</div>
				<div class="row">
					<div class="sixteen columns">
						<h3 class="title-block">Text Editor Icons</h3>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-file"></i> icon-file</li>
						  <li><i class="icon-file-alt"></i> icon-file-alt</li>
						  <li><i class="icon-cut"></i> icon-cut</li>
						  <li><i class="icon-copy"></i> icon-copy</li>
						  <li><i class="icon-paste"></i> icon-paste</li>
						  <li><i class="icon-save"></i> icon-save</li>
						  <li><i class="icon-undo"></i> icon-undo</li>
						  <li><i class="icon-repeat"></i> icon-repeat</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-text-height"></i> icon-text-height</li>
						  <li><i class="icon-text-width"></i> icon-text-width</li>
						  <li><i class="icon-align-left"></i> icon-align-left</li>
						  <li><i class="icon-align-center"></i> icon-align-center</li>
						  <li><i class="icon-align-right"></i> icon-align-right</li>
						  <li><i class="icon-align-justify"></i> icon-align-justify</li>
						  <li><i class="icon-indent-left"></i> icon-indent-left</li>
						  <li><i class="icon-indent-right"></i> icon-indent-right</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-font"></i> icon-font</li>
						  <li><i class="icon-bold"></i> icon-bold</li>
						  <li><i class="icon-italic"></i> icon-italic</li>
						  <li><i class="icon-strikethrough"></i> icon-strikethrough</li>
						  <li><i class="icon-underline"></i> icon-underline</li>
						  <li><i class="icon-link"></i> icon-link</li>
						  <li><i class="icon-paper-clip"></i> icon-paper-clip</li>
						  <li><i class="icon-columns"></i> icon-columns</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-table"></i> icon-table</li>
						  <li><i class="icon-th-large"></i> icon-th-large</li>
						  <li><i class="icon-th"></i> icon-th</li>
						  <li><i class="icon-th-list"></i> icon-th-list</li>
						  <li><i class="icon-list"></i> icon-list</li>
						  <li><i class="icon-list-ol"></i> icon-list-ol</li>
						  <li><i class="icon-list-ul"></i> icon-list-ul</li>
						  <li><i class="icon-list-alt"></i> icon-list-alt</li>
						</ul>
					</div>
				</div>
				<div class="row">
					<div class="sixteen columns">
						<h3 class="title-block">Directional Icons</h3>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-angle-left"></i> icon-angle-left</li>
						  <li><i class="icon-angle-right"></i> icon-angle-right</li>
						  <li><i class="icon-angle-up"></i> icon-angle-up</li>
						  <li><i class="icon-angle-down"></i> icon-angle-down</li>
						  <li><i class="icon-arrow-down"></i> icon-arrow-down</li>
						  <li><i class="icon-arrow-left"></i> icon-arrow-left</li>
						  <li><i class="icon-arrow-right"></i> icon-arrow-right</li>
						  <li><i class="icon-arrow-up"></i> icon-arrow-up</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
							<li><i class="icon-caret-down"></i> icon-caret-down</li>
						  <li><i class="icon-caret-left"></i> icon-caret-left</li>
						  <li><i class="icon-caret-right"></i> icon-caret-right</li>
						  <li><i class="icon-caret-up"></i> icon-caret-up</li>
						  <li><i class="icon-chevron-down"></i> icon-chevron-down</li>
						  <li><i class="icon-chevron-left"></i> icon-chevron-left</li>
						  <li><i class="icon-chevron-right"></i> icon-chevron-right</li>
						  <li><i class="icon-chevron-up"></i> icon-chevron-up</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-circle-arrow-down"></i> icon-circle-arrow-down</li>
						  <li><i class="icon-circle-arrow-left"></i> icon-circle-arrow-left</li>
						  <li><i class="icon-circle-arrow-right"></i> icon-circle-arrow-right</li>
						  <li><i class="icon-circle-arrow-up"></i> icon-circle-arrow-up</li>
						  <li><i class="icon-double-angle-left"></i> icon-double-angle-left</li>
						  <li><i class="icon-double-angle-right"></i> icon-double-angle-right</li>
						  <li><i class="icon-double-angle-up"></i> icon-double-angle-up</li>
						  <li><i class="icon-double-angle-down"></i> icon-double-angle-down</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-hand-down"></i> icon-hand-down</li>
						  <li><i class="icon-hand-left"></i> icon-hand-left</li>
						  <li><i class="icon-hand-right"></i> icon-hand-right</li>
						  <li><i class="icon-hand-up"></i> icon-hand-up</li>
						  <li><i class="icon-circle"></i> icon-circle</li>
						  <li><i class="icon-circle-blank"></i> icon-circle-blank</li>
						</ul>
					</div>
				</div>
				<div class="row">
					<div class="sixteen columns">
						<h3 class="title-block">Video Player Icons</h3>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-play-circle"></i> icon-play-circle</li>
						  <li><i class="icon-play"></i> icon-play</li>
						  <li><i class="icon-pause"></i> icon-pause</li>
						  <li><i class="icon-stop"></i> icon-stop</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-step-backward"></i> icon-step-backward</li>
						  <li><i class="icon-fast-backward"></i> icon-fast-backward</li>
						  <li><i class="icon-backward"></i> icon-backward</li>
						  <li><i class="icon-forward"></i> icon-forward</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-fast-forward"></i> icon-fast-forward</li>
						  <li><i class="icon-step-forward"></i> icon-step-forward</li>
						  <li><i class="icon-eject"></i> icon-eject</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-fullscreen"></i> icon-fullscreen</li>
						  <li><i class="icon-resize-full"></i> icon-resize-full</li>
						  <li><i class="icon-resize-small"></i> icon-resize-small</li>
						</ul>
					</div>
				</div>
				<div class="row">
					<div class="sixteen columns">
						<h3 class="title-block">Social Icons</h3>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-phone"></i> icon-phone</li>
						  <li><i class="icon-phone-sign"></i> icon-phone-sign</li>
						  <li><i class="icon-facebook"></i> icon-facebook</li>
						  <li><i class="icon-facebook-sign"></i> icon-facebook-sign</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-twitter"></i> icon-twitter</li>
						  <li><i class="icon-twitter-sign"></i> icon-twitter-sign</li>
						  <li><i class="icon-github"></i> icon-github</li>
						  <li><i class="icon-github-alt"></i> icon-github-alt</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-github-sign"></i> icon-github-sign</li>
						  <li><i class="icon-linkedin"></i> icon-linkedin</li>
						  <li><i class="icon-linkedin-sign"></i> icon-linkedin-sign</li>
						  <li><i class="icon-pinterest"></i> icon-pinterest</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-pinterest-sign"></i> icon-pinterest-sign</li>
						  <li><i class="icon-google-plus"></i> icon-google-plus</li>
						  <li><i class="icon-google-plus-sign"></i> icon-google-plus-sign</li>
						  <li><i class="icon-sign-blank"></i> icon-sign-blank</li>
						</ul>
					</div>
				</div>
				<div class="row">
					<div class="sixteen columns">
						<h3 class="title-block">Medical Icons</h3>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-ambulance"></i> icon-ambulance</li>
						  <li><i class="icon-beaker"></i> icon-beaker</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-h-sign"></i> icon-h-sign</li>
						  <li><i class="icon-hospital"></i> icon-hospital</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-medkit"></i> icon-medkit</li>
						  <li><i class="icon-plus-sign-alt"></i> icon-plus-sign-alt</li>
						</ul>
					</div>
					<div class="four columns">
						<ul class="the-icons">
						  <li><i class="icon-stethoscope"></i> icon-stethoscope</li>
						  <li><i class="icon-user-md"></i> icon-user-md</li>
						</ul>
					</div>
				</div>




				

		
	</div>

<!-- LATEST WORK -->
	<div class="container clearfix m-top-60">
		<div class="four columns carousel-intro m-bot-33">

						<div class="caption-container m-bot-20">
							<div class="title-block-text">
								THIS IS THE LIST OF<br>
								OUR RECENT<br>
								<strong>WORKS</strong>
							</div>
							
							<div class="carousel-navi jcarousel-scroll">
								<div class="jcarousel-prev"></div>
								<div class="jcarousel-next"></div>
							</div>
						</div>
			
		</div>

		
		<!-- jCAROUSEL -->
		<div class="jcarousel latest-work-jc m-bot-30" >
			<ul class="clearfix">
				<!-- LATEST WORK ITEM -->
				<li class="four columns">
						<div class="hover-item">
							<div class="view view-first">
								<img src="images/content/port-2-1.jpg" alt="Ipsum" >
								<div class="mask"></div>	
								<div class="abs">
									<a href="images/content/port-2-1.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a>
								</div>	
							</div>
							<div class="lw-item-caption-container">
								<a class="a-invert" href="portfolio-single.html" >
									<div class="item-title-main-container clearfix">
										<div class="item-title-text-container">
											<span class="bold">Lorem</span> Ipsum
										</div>
									</div>
								</a>
								<div class="item-caption">web design</div>
							</div>
						</div>
				</li>

				<!-- LATEST WORK ITEM -->
				<li class="four columns">
						<div class=" hover-item">
							<div class="view view-first">
								<img src="images/content/port-2-2.jpg" alt="Ipsum" >
								<div class="mask"></div>
								<div class="abs">
									<a href="images/content/port-2-2.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a>
								</div>	
							</div>
							<div class="lw-item-caption-container">
								<a class="a-invert" href="portfolio-single.html" >
									<div class="item-title-main-container clearfix">
										<div class="item-title-text-container">
											<span class="bold">Lorem</span> Ipsum
										</div>
									</div>
								</a>
								<div class="item-caption">photography</div>
							</div>
						</div>
				</li>

				<!-- LATEST WORK ITEM -->
				<li class="four columns">
						<div class=" hover-item">
							<div class="view view-first">
								<img src="images/content/port-2-3.jpg" alt="Ipsum" >
								<div class="mask"></div>
								<div class="abs">
									<a href="images/content/port-2-3.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a>
								</div>	
							</div>
							<div class="lw-item-caption-container">
								<a class="a-invert" href="portfolio-single.html" >
									<div class="item-title-main-container clearfix">
										<div class="item-title-text-container">
											<span class="bold">Lorem</span> Ipsum
										</div>
									</div>
								</a>
								<div class="item-caption">illustration</div>
							</div>
						</div>
				</li>

				<!-- LATEST WORK ITEM -->
				<li class="four columns">
						<div class="hover-item">
							<div class="view view-first">
								<img src="images/content/port-2-4.jpg" alt="Ipsum" >
								<div class="mask"></div>
								<div class="abs">
									<a href="images/content/port-2-4.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a>
								</div>	
							</div>
							<div class="lw-item-caption-container">
								<a class="a-invert" href="portfolio-single.html" >
									<div class="item-title-main-container clearfix">
										<div class="item-title-text-container">
											<span class="bold">Lorem</span> Ipsum
										</div>
									</div>
								</a>
								<div class="item-caption">web design</div>
							</div>
						</div>
				</li>

				<!-- LATEST WORK ITEM -->
				<li class="four columns">
						<div class=" hover-item">
							<div class="view view-first">
								<img src="images/content/port-2-5.jpg" alt="Ipsum" >
								<div class="mask"></div>
								<div class="abs">
									<a href="images/content/port-2-5.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a>
								</div>	
							</div>
							<div class="lw-item-caption-container">
								<a class="a-invert" href="portfolio-single.html" >
									<div class="item-title-main-container clearfix">
										<div class="item-title-text-container">
											<span class="bold">Lorem</span> Ipsum
										</div>
									</div>
								</a>
								<div class="item-caption">web design</div>
							</div>
						</div>
				</li>

				<!-- LATEST WORK ITEM -->
				<li class="four columns">
						<div class=" hover-item">
							<div class="view view-first">
								<img src="images/content/port-2-6.jpg" alt="Ipsum" >
								<div class="mask"></div>
								<div class="abs">
									<a href="images/content/port-2-6.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a>
								</div>	
							</div>
							<div class="lw-item-caption-container">
								<a class="a-invert" href="portfolio-single.html" >
									<div class="item-title-main-container clearfix">
										<div class="item-title-text-container">
											<span class="bold">Lorem</span> Ipsum
										</div>
									</div>
								</a>
								<div class="item-caption">web design</div>
							</div>
						</div>
				</li>
				
				<!-- LATEST WORK ITEM -->
				<li class="four columns">
						<div class=" hover-item">
							<div class="view view-first">
								<img src="images/content/port-2-7.jpg" alt="Ipsum" >
								<div class="mask"></div>
								<div class="abs">
									<a href="images/content/port-2-7.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a>
								</div>	
							</div>
							<div class="lw-item-caption-container">
								<a class="a-invert" href="portfolio-single.html" >
									<div class="item-title-main-container clearfix">
										<div class="item-title-text-container">
											<span class="bold">Lorem</span> Ipsum
										</div>
									</div>
								</a>
								<div class="item-caption">web design</div>
							</div>
						</div>
				</li>

				<!-- LATEST WORK ITEM -->
				<li class="four columns">
						<div class=" hover-item">
							<div class="view view-first">
								<img src="images/content/port-2-8.jpg" alt="Ipsum" >
								<div class="mask"></div>
								<div class="abs">
									<a href="images/content/port-2-8.jpg" class="lightbox zoom info"></a><a href="portfolio-single.html" class="link info"></a>
								</div>	
							</div>
							<div class="lw-item-caption-container">
								<a class="a-invert" href="portfolio-single.html" >
									<div class="item-title-main-container clearfix">
										<div class="item-title-text-container">
											<span class="bold">Lorem</span> Ipsum
										</div>
									</div>
								</a>
								<div class="item-caption">web design</div>
							</div>
						</div>
				</li>
			</ul>
		</div>
		<!-- jCAROUSEL End -->
	</div>	
<!-- OUR PROJECTS End -->


<!-- NEWS LETTER -->
<div class="dark-grey-bg">
	<div class="container m-bot-20 clearfix">
		<div class="sixteen columns">
			<div class="newsletter-container clearfix">
				<div class="nl-img-container">
					<img src="images/icon-mail.png" alt="mail">
				</div>
				<div class="nl-text-container clearfix">
					<div class="caption">
						<span class="bold">NEWS</span> LETTER
					</div>
					<div class="nl-text">Stay up-to date with the latest news and other stuffs, Sign Up today!</div>
					<div class="nl-form-container">
						<form class="newsletterform" method="post" action="#">
							<input type="text" onblur="if(this.value=='')this.value='Your email here...';" onfocus="if(this.value=='Your email here...')this.value='';" value="Your email here..." name="email"><button class="nl-button">SIGN UP</button>
						</form>
					</div>	
				</div>
			</div>
		</div>
	</div>
</div>
	
<!-- OUR CLIENTS -->
	<div class="container clearfix">
		<div class="sixteen columns m-bot-20">
			<ul class="our-clients-container clearfix ">
				<li class="">
					<a href="">
						<div class="bw-wrapper">
							<img src="images/logo1.png" alt="client" >
						</div>
					</a>
				</li>
				<li class="">
					<a href="">
						<div class="bw-wrapper">
							<img src="images/logo2.png" alt="client" >
						</div>
					</a>
				</li>
				<li class="">
					<a href="">
						<div class="bw-wrapper">
							<img src="images/logo3.png" alt="client">
						</div>
					</a>
				</li>
				<li class="">
					<a href="">
						<div class="bw-wrapper">
							<img src="images/logo4.png" alt="client" >
						</div>
					</a>
				</li>
				<li class="">
					<a href="">
						<div class="bw-wrapper">
							<img src="images/logo5.png" alt="client" >
						</div>
					</a>
				</li>
            </ul>
		</div>	
	</div>
<!-- FOOTER -->
	<footer>
		<div class="footer-content-bg">
			<div class="container clearfix">
				<div class="one-third-footer-spec column omega">

						<div class="logo-footer-container">	
							<a href="index.html" class="logo" rel="home" title="Home">
								<img src="images/logo-retina.png" alt="solana" >
							</a>
						</div>
				</div>
				<div class="two-thirds-footer-spec column alpha">


					<p class="footer-content-container m-none">WE PROVIDE AWESOME DIGITAL <strong>SERVICES</strong></p>

				</div>
			</div>
			<div class="container clearfix">
				<div class="one-third column">
					<div class="footer-social-text-container">
						<p class="title-font-24">SAY <strong>HELLO</strong></p>
						<p class="title-font-12">WE'D LOVE HEARING FROM YOU</p>
					</div>
					<div class="footer-social-links-container">	
						<ul class="social-links clearfix">
							<li><a class="facebook-link" target="_blank" title="Facebook" href="#item/solana-responsive-html5-template/5590059?ref=abcgomel"></a></li>
							<li><a class="skype-link" target="_blank" title="Skype" href="#item/solana-responsive-html5-template/5590059?ref=abcgomel"></a></li>
							<li><a class="twitter-link" target="_blank" title="Twitter" href="#item/solana-responsive-html5-template/5590059?ref=abcgomel"></a></li>
							<li><a class="flickr-link" target="_blank" title="Flickr" href="#item/solana-responsive-html5-template/5590059?ref=abcgomel"></a></li>
							<li><a class="vimeo-link" target="_blank" title="Vimeo" href="#item/solana-responsive-html5-template/5590059?ref=abcgomel"></a></li>
							<li><a class="linkedin-link" target="_blank" title="linkedin" href="#item/solana-responsive-html5-template/5590059?ref=abcgomel"></a></li>
							<li><a class="pintrest-link" target="_blank" title="pintrest" href="#item/solana-responsive-html5-template/5590059?ref=abcgomel"></a></li>
							<li><a class="googleplus-link" target="_blank" title="googleplus" href="#item/solana-responsive-html5-template/5590059?ref=abcgomel"></a></li>
						</ul>
					</div>
					
					
				</div>
				<div class="one-third column ">
					<h3 class="caption footer-block">LATEST <span class="bold">POST</span></h3>
					<ul class="latest-post">
						<li class="standart-post">
							<h4 class="title-post-footer"><a href="blog-single.html">Donec id elit</a></h4>
							<h4 class="date-post-footer">July 10, 2013</h4>
						</li>
						<li class="image-post">
							<h4 class="title-post-footer"><a href="blog-single.html">Donec id elit</a></h4>
							<h4 class="date-post-footer">July 10, 2013</h4>
						</li>
						<li class="video-post">
							<h4 class="title-post-footer"><a href="blog-single.html">Donec id elit</a></h4>
							<h4 class="date-post-footer">July 10, 2013</h4>
						</li>
					</ul>
				</div>
				<div class="one-third column ">
					<h3 class="caption footer-block">CONTACT <span class="bold">INFO</span></h3>
					<ul class="footer-contact-info">
						<li class="footer-loc">
							Corporation, 123 Some Ave, Suite 700,  New York
						</li>
						<li class="footer-phone">
							(123) 456-7890<br>(123) 987-6540
						</li>
						<li class="footer-mail">
							<a href="#item/solana-responsive-html5-template/5590059?ref=abcgomel">email@felius.com</a><br>
							<a href="#item/solana-responsive-html5-template/5590059?ref=abcgomel">email@optimas.com</a>
						</li>
					</ul>
					 
				</div>
			</div>
		</div>
		<div class="footer-copyright-bg">
			<div class="container ">
				<div class="sixteen columns clearfix">
					<div class="footer-menu-container">
						<nav class="clearfix" id="footer-nav">
							<ul class="footer-menu">
								<li><a href="index.html">Home</a></li>
								<li><a href="elements.html">Features</a></li>
								<li><a href="portfolio.html">Portfolio</a></li>
								<li><a href="blog.html">Blog</a></li>
								<li><a href="contact.html">Contact</a></li>
								<li><a href="#item/solana-responsive-html5-template/5590059?ref=abcgomel">Purchase</a></li>
							</ul>
						</nav>
					</div>	
					<div class="footer-copyright-container right-text">
					&copy; Solan<span class="yellow">a</span> - Build with Passion by <a class="author" href="#user/abcgomel/portfolio">AbcGomel</a>
					</div>
				</div>
				
			</div>
		</div>
	</footer>	
		<p id="back-top">
			<a href="#top" title="Back to Top"><span></span></a>
		</p>
</div><!-- End wrap -->
<!-- JS begin -->

		<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
		<script type="text/javascript" src="js/superfish.js"></script>
		<script type="text/javascript" src="js/jquery-ui.min.js"></script>

		<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
		<script type="text/javascript" src="js/jquery.fancybox-1.3.4.pack.js"></script>
		<script type="text/javascript" src="js/jQuery.BlackAndWhite.min.js"></script>
		<script type="text/javascript" src="js/jquery.validate.min.js"></script>
		<script type="text/javascript" src="js/jflickrfeed.min.js"></script>
		<script type="text/javascript" src="js/jquery.quicksand.js"></script>
		<script type="text/javascript" src="js/main.js"></script>
		<script type="text/javascript" src="js/jquery-cookie.js"></script>  
		<script src="js/styleswitcher.js"></script>
		<div class="switcher"></div>

<!-- JS end -->
		
	</body>
</html>		
